<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :model="form" :inline="true" class="demo-form-inline">
          <div class="filter-container">
            <!-- 关键字 -->
          <el-form-item prop="keyword" :label="$t('table.'+'keyword')">
              <el-input @keyup.enter="search" placeholder="根据文章标题搜索" v-model="form.keyword"></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item prop="state" :label="$t('table.'+'state')">
              <el-select  placeholder="请选择" v-model="form.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
          </el-form-item>
          <!-- 清除，搜索按钮 -->
          <el-form-item >
              <el-button size="small" @click="clearFont">{{$t('table.'+'eliminate')}}</el-button>
              <el-button :loading="isLoading" type="primary" size="small" @click="search">{{$t('table.'+'search')}}</el-button>
          </el-form-item>
          <!-- excel导出，新增技巧 -->
          <div style="text-align:right;float:right;">
          <el-button size="small" type="primary" @click="handleExcelExport">{{$t('table.Excel-Export')}}</el-button>
          <el-button class="filter-item fr" size="small" type="success" icon="el-icon-edit" @click="addArticle">{{$t('table.'+'addArticles')}}</el-button>
          </div>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          :title="totalCounts"
          type="info"
          show-icon>
        </el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="articles"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          style="width: 100%;margin-top:10px">
          <el-table-column  :label="$t('table.'+'id')" width="60" type="index" :index="indexMethod">
          </el-table-column>
          <!--文章标题  -->
          <el-table-column  :label="$t('table.'+'articleTitle')" width="350">
            <template #default="{row}">
              <span>{{row.title}}</span>
              <a v-if="row.videoURL" class="el-icon-film" style="color:blue; font-size:20px;padding-left:6px;" @click="showVideoDialog(row.videoURL)"></a>
              <!-- <span>{{row.videoURL}}</span> -->
            </template>
          </el-table-column>
          <!-- 阅读数 -->
          <el-table-column  :label="$t('table.'+'articleVisits')">
            <template #default="{row}">
              <span>{{row.visits}}</span>
            </template>
          </el-table-column>
          <!-- 录入人 -->
          <el-table-column  :label="$t('table.'+'EnteredBy')" >
            <template #default="{row}">
              <span>{{row.username}}</span>
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column :label="$t('table.'+'EntryTime')" width="180">
            <template #default="{row}">
              <span>{{time(row.createTime)}}</span>
            </template>
          </el-table-column>
          <!--状态  -->
          <el-table-column  :label="$t('table.'+'state')" width="100">
            <template #default="{row}">
              <span v-if="row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column  :label="$t('table.'+'operation')" width="220">
            <template #default="{row}">
              <el-button  type="text" @click="previewArticle(row.id)">预览</el-button>
              <el-button  type="text" @click="changeStates(row)">
                <span >{{row.state===0? '启用' : '禁用'}}</span>
              </el-button>
              <el-button type="text" :disabled="row.state===1?true:false" @click="editArticle(row.id,row)">修改</el-button>
              <el-button type="text"  :disabled="row.state===1?true:false" @click="delArticle(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="float: right ;padding:10px">
        <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[1,5,10,20, 50]"
              :total="counts"
              :current-page="form.page"
              :page-size="form.pagesize"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
      </el-card>
      <!-- 预览弹框 -->
      <articlePreview :showPreviewDialog.sync="showPreviewDialog" :rowList="rowList"></articlePreview>
      <!-- 新增/编辑弹框 -->
      <articleAdd ref="addArticle" :showAddDialog.sync="showAddDialog" :rowList="rowList"></articleAdd>
      <!-- 视频播放 -->
      <div v-show="openVideo" class="video-preview">
        <div class="close" @click="close()">
          <span class="el-icon-close"></span>
        </div>
        <div class="box">
          <!-- controls 显示播放的控件 -->
          <!-- autoplay 自动播放（谷歌浏览器中配合muted实现静音播放） -->
          <!-- loop 循环播放 -->
          <!-- <video src="https://rz152-1316190779.cos.ap-beijing.myqcloud.com/video.mp4" controls autoplay loop></video> -->
          <video  v-if="videoURL !== '' ? true : false"  :src="videoURL" controls autoplay muted loop></video>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// 引入接口
import { list as getArticles, detail, remove, changeState } from '@/api/hmmm/articles'
// 引入处理时间方法
import { parseTime } from '@/utils/index'
// 引入预览弹框组件
import articlePreview from '@/module-hmmm/components/articles-preview.vue'
// 引入新增文章弹框组件
import articleAdd from '@/module-hmmm/components/articles-add.vue'
// 引入导出文件
import { handleDownload } from '@/utils/excelExport'
export default {
  data () {
    return {
      articles: [], // 文章数据
      counts: 0, // 总记录数
      form: {
        page: 1, // 页码
        pagesize: 10, // 页容量
        keyword: '', // 关键字
        state: null // 状态
      },
      isLoading: false, // 加载状态
      rowList: {}, // 点击这行的数据
      isDisabled: false, // 禁用状态
      openVideo: false, // 显示视频
      showPreviewDialog: false, // 显示预览弹框
      showAddDialog: false, // 显示新增/编辑弹框
      videoURL: ''// 视频地址
    }
  },
  components: {
    articlePreview, // 注册预览弹框组件
    articleAdd // 注册新增/编辑弹框组件
  },
  computed: {
    // 提示总条数
    totalCounts () {
      return `共${this.counts}条记录`
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // excel导出
    async handleExcelExport () {
      const { data: { items } } = await getArticles({ page: 1, pagesize: 9999 })
      const tableTypeList = {
        id: '序号',
        title: '文章标题',
        visits: '阅读数',
        username: '录入人',
        createTime: '录入时间',
        state: '状态'
      }
      const zh = []
      const type = {}
      for (const k in tableTypeList) {
        zh.push(tableTypeList[k])
        const typeKey = tableTypeList[k]
        type[typeKey] = k
      }
      handleDownload(items, zh, type)
    },
    // 关闭视频
    close () {
      this.openVideo = false // 遮罩层关闭
      this.videoURL = '' // 路径清空
    },
    // 打开视频
    showVideoDialog (url) {
      this.openVideo = true // 显示遮罩层
      this.videoURL = url // 路径被赋值
    },
    // 页容量变化
    handleSizeChange (val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getArticlesList()
    },
    // 页码变化
    handleCurrentChange (val) {
      this.form.page = val
      this.getArticlesList()
    },
    // 索引调整
    indexMethod (index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1
    },
    // 清除
    clearFont () {
      this.form.keyword = ''
      this.form.state = null
      this.getArticlesList()
    },
    // 搜索
    async search () {
      console.log(this.form.state)
      this.form.page = 1
      const { data } = await getArticles(this.form)
      this.articles = data.items
    },
    // 改变状态(1启用/0禁用)
    async changeStates (row) {
      row.state = row.state === 1 ? 0 : 1
      await changeState(row)
      // console.log(res)
      // console.log(row)
      this.getArticlesList()
      this.$message.success('操作成功')
    },
    // 处理时间
    time (date) {
      return parseTime(date)
    },
    // 获取文章列表
    async getArticlesList () {
      this.isLoading = true // 加载中
      const { data } = await getArticles(this.form)
      this.articles = data.items
      this.counts = data.counts
      this.isLoading = false
    },
    // 预览文章
    async previewArticle (id) {
      try {
        const { data } = await detail({ id })
        this.rowList = data // 数据回填
        this.showPreviewDialog = true
      } catch (err) {
        console.log(err)
      }
    },
    // 点击新增技巧
    addArticle () {
      this.showAddDialog = true
      this.rowList = {} // 置空数据(主要清id),影响新增/编辑的标题
    },
    // 点击删除
    delArticle (id) {
      this.$confirm('确定删除吗?', '温馨提示', {
        type: 'warning'
      })
        .then(async () => {
          // 优化：当前页面只剩一条数据，删完数据回到前一页
          if (this.form.page > 1 && this.articles.length === 1) {
            this.form.page--
          }
          await remove({ id: id })
          this.$message.success('删除成功')
          this.getArticlesList()
        })
        .catch(() => {})
    },
    // 点击修改
    async editArticle (id, data) {
      this.showAddDialog = true
      this.rowList = data // 数据回填
      this.$nextTick(() => {
        this.$refs.addArticle.getArticleDetail(id)
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.video-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 9999;
}
.video-preview .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    // -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.video-preview .box video{
    width: 100%;
    height: 100%;
}
.video-preview .close {
    z-index: 999;
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    // -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    // -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
}
</style>
